<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>分享</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body{
            background: rgba(190, 190, 190, 0.3);
        }
        .share_wenzi{
          font-size:15px;
          text-align:center;
          padding-bottom:20px;
          font-family:Adobe Heiti Std R;
          color:#7C7C7C;
        }
        .aa {
            padding-bottom: 20px !important;
        }

        footer img {
            width: 50px;
            height: 50px;
            margin: 0 auto;
        }

        .share:before {
            content: "";
            position: absolute;
            width: 25px;
            height: 1px;
            background-color: #D9D9D9;
            left: 50%;
            margin-left: -53px;
            top: 13px;
        }

        .share:after {
            content: "";
            position: absolute;
            width: 25px;
            height: 1px;
            background-color: #D9D9D9;
            right: 50%;
            margin-right: -53px;
            top: 13px;
        }

        .share {
            position: relative;
            line-height: 26px;
            text-align: center;
            margin-bottom: 12px;
        }

        .aui-bar-tab-label {
            color: #A2A7A4
        }

        .aui-bar-tab-label {
            margin-top: 8px;
        }

        .aui-bar-tab {
            padding-top: 20px;
        }

        .line {
            height: 8px;
            background-color: #f5f5f5;
        }

        .quxiao {
            text-align: center;
            height: 41px;
            line-height: 41px;
            font-size: 14px;
        }

    </style>
</head>

<body>
    <div id="vm">
        <footer class="aui-bar aui-bar-tab" id="footer">
            <div class="aui-row  aa">
              <div class="aui-font-size-14" style="margin-bottom:18px;">分享到</div>

                <div class="aui-col-xs-3" tapmode v-on:click.stop="wxshare()">
                    <div><img src="../../image/VIP/wechat.png"></div>
                    <div class="aui-bar-tab-label">微信</div>
                </div>
                <div class="aui-col-xs-3" tapmode v-on:click.stop="sharetimeline()">
                    <div><img src="../../image/VIP/pengyou.png"></div>
                    <div class="aui-bar-tab-label">朋友圈</div>
                </div>
                <div class="aui-col-xs-3" tapmode v-on:click.stop="qqshare()">
                    <div><img src="../../image/VIP/tencent.png"></div>
                    <div class="aui-bar-tab-label">QQ好友</div>
                </div>
                <div class="aui-col-xs-3" tapmode v-on:click.stop="weibohare()">
                    <div><img src="../../image/my/weibo.png"></div>
                    <div class="aui-bar-tab-label">新浪微博</div>
                </div>
            </div>
            <div class="line"></div>
            <div class="quxiao" onclick="guanbiframe()">取消</div>
        </footer>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/thirdparty.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el: '#vm',
        data: {
            videoid: '',
            sharetitle: '',
            thirdtype: '我是类型不过好像没啥用',
            url: '',
            qqurl:'',
            title: '我是标题标题',
            description: '音乐教学尽在学学',
            imgurl: 'https://www.apicloud.com/icon/b1/c5/b1c5475e6014b8baf5c19fa0af7ebc2c.png'
        },
        created: function() {
            var _this = this;
            apiready = function() {
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
                _this.init()
                $api.fixTabBar($api.byId('footer'))
                _this.videoid = api.pageParam.videoid;
                _this.url = 'http://app.xuexueclub.cn/study/public/sharevideo/share.html?id==' + _this.videoid;
                // qq分享时sharetitle不能为空不能为空不能为空不能为空
                _this.sharetitle = api.pageParam.sharetitle;
                _this.description = '我从这里学了一首歌';

                new rest().post('getFenxiangVideo').success(function(res) {
                    if (res.flag == 1) {
                      _this.qqurl ='http://app.xuexueclub.cn/study/public/sharevideo/share2.html?id=='+res.msg.video_id
                    }
                }).error(function(err) {
                    api.toast({
                        msg: err.msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }).run()
            }
        },
        methods: {
            init: function() {
                var _this = this;
            },
            wxshare: function() {
                var _this = this;
                third.shareurl('wx', 'session', _this.url, _this.sharetitle, _this.description, _this.imgurl, function(ret, err) {
                    _this.callback(ret, err)
                },function(ret,err) {
                  // alert(JSON.stringify(ret))
                  _this.share(_this.sharedata,_this.sharetype)

                })
            },
            sharetimeline: function() {
                var _this = this;
                third.shareurl('wx', 'timeline', _this.url, _this.sharetitle, _this.description, _this.imgurl, function(ret, err) {
                    _this.callback(ret, err)
                },function(ret,err) {
                  // api.toast({
                  //     msg: '分享成功',
                  //     duration: 2000,
                  //     location: 'bottom'
                  // });
                })
            },
            qqshare: function() {
                var _this = this;
                third.shareurl('qq', 'QFriend', _this.qqurl, _this.sharetitle, _this.description, _this.imgurl, function(ret, err) {
                    _this.callback(ret, err)
                },function(ret,err) {
                  _this.share(_this.sharedata,_this.sharetype)


                })
            },
            weibohare: function() {
                var _this = this;
                // api.toast({
                //     msg: '微博分享暂未开通',
                //     duration: 2000,
                //     location: 'bottom'
                // });
                // return;
                third.shareurl('weibo', '', _this.url, _this.sharetitle, _this.description, _this.imgurl, function(ret, err) {
                  // alert(JSON.stringify(res))
                  // alert(JSON.stringify(err))

                    _this.callback(ret, err)
                },function(ret,err) {
                  // alert(JSON.stringify(ret))
                  // alert(JSON.stringify(err))
                  if (ret.status) {
                    api.toast({
                        msg: '分享成功',
                        duration: 2000,
                        location: 'middle'
                    });
                  }
                  _this.share(_this.sharedata,_this.sharetype)

                })
            },
            callback: function(ret) {
              var _this=this;
              // alert(JSON.stringify(ret))
                // if (ret.status) {
                    api.sendEvent({
                        name: 'zhuanfa'
                    });

                    setTimeout(function() {
                      api.closeFrame();
                    }, 1000)
                // } else {
                //     api.toast({
                //         msg: '分享失败',
                //         duration: 2000,
                //         location: 'middle'
                //     })
                // }
            },
            share(data,type){
              var _this = this;
              new rest().get('share').datae(data).success(function(res) {
                  if (res.flag == 1) {
                    // alert(JSON.stringify(res))
                   if(type=='2'){
                      // api.toast({
                      //     msg: '分享成功',
                      //     duration: 2000,
                      //     location: 'middle'
                      // });
                      api.sendEvent({
                          name: 'sharevideosuccess',
                      });
                    }else {
                      // api.toast({
                      //     msg: '分享成功',
                      //     duration: 2000,
                      //     location: 'middle'
                      // });

                      api.sendEvent({
                          name: 'shareappsuccess',
                      });
                    }
                  } else {
                      api.toast({
                          msg: res.msg,
                          duration: 2000,
                          location: 'middle'
                      });
                  }
                  console.log(JSON.stringify(res))
              }).error(function(err) {
                  console.log(JSON.stringify(err))
              }).run()
            }


        }
    })

    $('html,body').on('click', function() {
        api.closeFrame();
    })

    function guanbiframe() {
        api.closeFrame();
    }

</script>

</html>
